
import './App.scss';
//将tarbar 组件引入到根组件中
import Mytabbar from '@/components/Mytabbar';

// 导入路由规则组件
import Rules from '@/router/Index'
import { useLocation } from 'react-router-dom';

function App() {
  // 在根组件App.jsx 中控制tabbar 的显示和隐藏,
  // 思路: 根据当前的路由信息(地址path), 来判断当前路由信息是否允许显示tabbar
  const loc = useLocation();
  // console.log('loc', loc);
  const pathname = loc.pathname.split('/')[1];
  // console.log('pathname', pathname);

  //定义数组, 该数组中都是不显示tabbar 的路由地址
  const pathArr = [
    '/detail',
    '/login',
    '/regist',
    '/regist/step1',
    '/car'
  ]
  console.log(pathArr.indexOf(`/${pathname}`) == -1);
  return (
    <div className="App">
      {/* 匹配路由显示的组件 */}
      <Rules></Rules>
      {/*控制底部的tabbar是否显示*/}
      {
        pathArr.indexOf(`/${pathname}`) == -1 ? <Mytabbar></Mytabbar> : null
      }

    </div>
  );
}

export default App;
